<template>
    <el-form
        :model="registerFrom"
        status-icon
        ref="registerFrom"
        label-width="120px"
        :rules="rules2"
    >
        <el-form-item label="用户名" prop="name">
            <el-input type="text" v-model="registerFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="account2">
            <el-input type="text" v-model.number="registerFrom.account2"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password2">
            <el-input type="password" v-model="registerFrom.password2" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="再次输入密码">
            <el-input type="password" v-model.number="password_2" autocomplete="off" @blur="blur"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="sublim" style="width: 80%;">注册</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    props: ["from"],
    inject: ["reload"],
    data() {
        return {
            registerFrom: {
                name: "",
                account2: "",
                password2: ""
            },
            rules2: {
                name: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 7,
                        message: "用户名长度在 3 到 7 之间",
                        trigger: "blur"
                    }
                ],
                account2: [
                    {
                        pattern: /^\d{3,7}$/,
                        message: "密码长度在 3 到 7 之间"
                    },
                    {
                        type: "number",
                        message: "请输入正确的账号格式（数字）",
                        trigger: "change"
                    },
                    {
                        type: "number",
                        message: "请输入正确的账号格式（数字）",
                        trigger: "blur"
                    },
                    {
                        required: true,
                        message: "请输入账号",
                        trigger: "blur"
                    }
                ],
                password2: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 7,
                        message: "密码长度在 3 到 7 之间",
                        trigger: "blur"
                    }
                ]
            },
            password_2: ""
        };
    },
    methods: {
        sublim() {
            if (
                this.registerFrom.name &&
                this.registerFrom.account2 &&
                this.registerFrom.password2
            ) {
                if (this.from) {
                    this.$router.push({
                        path: this.from
                    });
                    this.$global.updataUser(this.registerFrom.name);
                    this.$global.updataNewMes("1");
                    this.reload();
                } else {
                    this.$router.push({
                        path: "/home"
                    });
                    this.$global.updataUser(this.registerFrom.name);
                    this.$global.updataNewMes("1");
                    this.reload();
                }
                this.$message({
                    showClose: true,
                    message: "注册成功",
                    type: "success"
                });
            } else {
                this.$message({
                    showClose: true,
                    message: "请填写信息",
                    type: "error"
                });
            }
        },
        blur() {
            if (this.password_2 != this.registerFrom.password2) {
                this.$message({
                    showClose: true,
                    message: "密码不匹配",
                    type: "error"
                });
                this.$nextTick(() => {
                    this.password_2 = "";
                });
            }
        }
    }
};
</script>